<template>
  <div>
    <!-- 折叠面板组件 -->

    <Card>
      <div style="min-height: 730px">
        <Row>
          <Col span="1">
            <Row type="flex" align="middle">
              <Col span="2">
                <div class="nl-square"></div>
              </Col>
              <Col>规章制度</Col>
            </Row>
          </Col>
          <div span="16" style="text-align:right;margin-right:30px;margin-bottom:30px">
            <Button class="search-btn" type="primary" @click="addRegulation">新建规章制度</Button>
          </div>
        </Row>
        <Table :columns="columns1" :data="nowData" ref="selection" stripe border></Table>
        <!-- total：分页显示多少条数据
                  page-size：每页显示多少条数据
                  current:当前页码
                  on-change：改变页码回调，返回值：当前页码
        on-page-size-change：切换每页条数时回调，返回值：每页的数据条数-->
        <Row type="flex" justify="center" class="nl-page">
          <Col>
            <Page
              :total="dataCount"
              :page-size="pageSize"
              :current="pageCurrent"
              @on-change="changepage"
              @on-page-size-change="_nowPageSize"
              show-total
              show-sizer
              show-elevator
            />
          </Col>
        </Row>
      </div>
    </Card>
  </div>
</template>
<style scoped>
.layout-con {
  height: 100%;
  width: 100%;
}
.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.nl_name {
  color: #ffffff;
}
.nl_name:nth-child(1) {
  margin-top: 0.5rem;
}
.send-news {
  margin-bottom: 10px;
}
.nl-user {
  background: white;
  box-shadow: 0 0 10px #dcdee2;
  height: 50px;
}
.nl-square {
  width: 3px;
  height: 13px;
  background: #3431ec;
}
/* .ivu-menu-dark {
  background: #191952;
} */
.nl-left {
  background: #191952;
}
/* .ivu-menu-submenu:hover {
  background: #3b3994;
}
.ivu-menu-item{
  background: #0c0c35 !important;
}
.ivu-menu-item:hover{
  background: #0d0d3d !important;
}
/* 选中时的样式 */
/*.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
  background: #191952 !important;
}  */
.nl-page {
  margin-top: 10px;
}
.nl-logoname {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.nl-newsCuration-row {
  margin-bottom: 10px;
}
/* 旋转 */
.aa {
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
.go {
  transform: rotate(-180deg);
  transition: all 0.2s;
  transform-origin: 50% 45%;
}
/* table th样式 */
.ivu-table-header th {
  color: red !important;
}
</style>
<script>
export default {
  data() {
    return {
      isCollapsed: false,
      nowData: [],

      columns1: [
        // {
        //   type: "selection",
        //   width: 60,
        //   align: "center"
        // },
        {
          key: "title", //标题
          align: "center",
          width: 500,
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "标题"
            );
          }
        },
        {
          key: "articleName",
          align: "center",
          renderHeader: (h, params) => {
            //文号
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "文号"
            );
          }
        },
        {
          key: "issueTime", //发布时间
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "发布日期"
            );
          }
        },
        {
          key: "fujian", //附件
          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "附件"
            );
          }
        },

        {
          // title: "操作",
          key: "operating",

          align: "center",
          renderHeader: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "#2d8cf0"
                }
              },
              "操作"
            );
          },
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index);
                      // console.log(this.$router)
                    }
                  }
                },
                "修改"
              ),

              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.index);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      //表格数据
      data1: [],
      // 控制菜单打开关闭的属性
      visible: false,
      //分页
      pageSize: 10, //每页显示多少条数据
      dataCount: 0, //总条数
      pageCurrent: 1, //当前页
      //媒体类型多选框
      indeterminate: false, //半勾选状态如果为true
      checkAll: false, //选择所有属性
      checkAllGroup: [], //选择了哪一项
      //情感属性多选框
      eaIndeterminate: false,
      eaCheckAll: false,
      eaCheckAllGroup: [],
      //媒体类别选择器
      mediaClass: [
        {
          value: "government",
          label: "政府"
        },
        {
          value: "personal",
          label: "个人"
        }
      ],
      directional: [
        {
          value: "focuson",
          label: "重点关注"
        },
        {
          value: "generalAttention",
          label: "一般关注"
        }
      ],
      releaseArea: [
        {
          value: "tianjin",
          label: "天津"
        },
        {
          value: "beijing",
          label: "北京"
        }
      ],
      timeSequence: [
        {
          value: "ascending",
          label: "升序"
        },
        {
          value: "decending",
          label: "降序"
        }
      ],
      reviewStatus: [
        {
          value: "through",
          label: "通过"
        },
        {
          value: "rejected",
          label: "驳回"
        }
      ],
      mediaLevel: [
        {
          value: "level1",
          label: "一级"
        },
        {
          value: "level2",
          label: "二级"
        },
        {
          value: "level3",
          label: "三级"
        }
      ],
      repeatInformation: [
        {
          value: "dupRemoval",
          label: "去重"
        },
        {
          value: "unDupRemoval",
          label: "不去重"
        }
      ],
      matchPattern: [
        {
          value: "titleMatch",
          label: "标题匹配"
        },
        {
          value: "paragraphMatch",
          label: "段落匹配"
        }
      ],
      mcModel: "",
      direModel: "",
      raModel: "",
      tsModel: "",
      rsModel: "",
      mlModel: "",
      riModel: "",
      mpModel: "",
      rotate: false //控制折叠面板图标旋转
    };
  },
  created() {
    this._getData();
    this.defaultOption();
  },
  methods: {
    test(name) {
      console.log(name);
      this.$router.push({ name: name });
    },
    addRegulation() {
      //跳转到新增规章制度
      this.$router.push({
        name: "addRegulation"
        // params: { id: this.params.index }
      });
    },
    // 菜单打开
    handleOpen() {
      this.visible = true;
    },
    //菜单关闭
    handleClose() {
      this.visible = false;
    },
    //所有数据
    _getData() {
      //获取data1
      this.data1 = [];
      this.nowData = [];
      //将数据填入data1
      for (let i = 0; i < 92; i++) {
        let a = {
          title:
            "关于印发《渤海银行股份有限公司声誉风险管理政策（2017年修订）》的通知",
          articleName: "渤银发〔2017〕34号",
          issueTime: "2017-11-29",
          fujian: "附件渤银发〔2017〕34号声誉风险管理政策（2017修订）.DOC"
        };
        this.data1.push(a);
      }
      //分页显示所有数据总数
      this.dataCount = this.data1.length;
      //循环展示页面刚加载是需要的数据条数
      // this.nowData = [];
      // for (let i = 0; i < this.pageSize; i++) {
      //   this.nowData.push(this.data1[i]);
      // }
      let _start = (this.pageCurrent - 1) * this.pageSize;
      let _end = this.pageCurrent * this.pageSize;
      this.nowData = this.data1.slice(_start, _end);
    },
    //点击，切换页面
    changepage(index) {
      let _start = (index - 1) * this.pageSize;
      let _end = index * this.pageSize;
      this.nowData = this.data1.slice(_start, _end);
      this.pageCurrent = index;
      this._getData();
    },
    //每页显示的数据条数
    _nowPageSize(index) {
      //实时获取当前需要显示的条数
      this.pageSize = index;
      this._getData();
    },
    //多选框全选方法
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        this.checkAllGroup = [
          "微博",
          "论坛",
          "博客",
          "微博1",
          "搜狐新闻",
          "报刊",
          "头条",
          "其他形式",
          "报刊1",
          "头条1",
          "其他形式1",
          "头条2",
          "其他形式2"
        ];
      } else {
        this.checkAllGroup = [];
      }
    },
    //查看是否全选
    checkAllGroupChange(data) {
      if (data.length === 13) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },
    //情感属性多选
    eaHandleCheckAll() {
      if (this.eaIndeterminate) {
        this.eaCheckAll = false;
      } else {
        this.eaCheckAll = !this.eaCheckAll;
      }
      this.eaIndeterminate = false;
      if (this.eaCheckAll) {
        this.eaCheckAllGroup = ["正面", "中性", "负面"];
      } else {
        this.eaCheckAllGroup = [];
      }
    },
    eaCheckAllGroupChange(data) {
      if (data.length === 3) {
        this.eaIndeterminate = false;
        this.eaCheckAll = true;
      } else if (data.length > 0) {
        this.eaIndeterminate = true;
        this.eaCheckAll = false;
      } else {
        this.eaIndeterminate = false;
        this.eaCheckAll = false;
      }
    },
    //选择器默认选择的方法https://blog.csdn.net/weixin_40300591/article/details/88763790
    defaultOption() {
      this.mcModel = this.mediaClass[0].value;
      this.direModel = this.directional[0].value;
      this.raModel = this.releaseArea[0].value;
      this.tsModel = this.timeSequence[0].value;
      this.rsModel = this.reviewStatus[0].value;
      this.mlModel = this.mediaLevel[0].value;
      this.riModel = this.repeatInformation[0].value;
      this.mpModel = this.matchPattern[0].value;
    },
    //改变折叠面板的图标https://www.cnblogs.com/IwishIcould/p/11823397.html
    changeIcon() {
      this.rotate = !this.rotate;
      console.log(this.rotate);
    }
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  }
};
</script>

